<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 84361
  Date: 2020/6/12
  Time: 11:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>日志管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<%--<input type="text" class="layui-input" id="test1">--%>
<div style="height: 60px;background-color: #f2f2f2;display: flex;align-items: center;justify-content: flex-start;margin: 0">
    <form class="layui-form">
        <div class="layui-inline" style="float: left ">
            <label class="layui-form-label">开始于</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test1" name="one">
                <%--<input style="width: 50%" type="text" class="layui-input" id="test2" name="xxx">--%>
            </div>
        </div>
        <div class="layui-inline" style="float: left ">
            <label class="layui-form-label">至</label>
            <div class="layui-input-inline">
                <%--<input style="width: 50%;float: left" type="text" class="layui-input" id="test1" name="xxx">--%>
                <input type="text" class="layui-input" id="test2" name="two">
            </div>
        </div>

        <div class="layui-inline" style="float: left">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="query"  lay-submit>查询</button>
            </div>

        </div>

    </form>
    <div class="layui-inline">
        <div class="layui-input-block">
            <button class="layui-btn" lay-filter="empty" lay-event="empty" id="empty">清空日志</button>
        </div>
    </div>

</div>

<table id="roleTable" lay-filter="roleTable" ></table>
<%--html模板，别的地方可以根据ID来引用该模板内容--%>


<%--引入js--%>
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>

    //layui引入特定模块的方式
    layui.use(['layer', 'form','table','jquery','laydate'], function () {
        var layer = layui.layer//layer 弹窗对象
            , form = layui.form;//表单对象
        var table=layui.table;
        var $=layui.$;//引入jquery
        var laydate = layui.laydate;
        //表单提交事件监听 submit(触发submit的按钮的lay-filter)
        form.on('submit(query)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //重新加载表格
            table.reload("roleTable",{
                where:{//查询条件
                    params:data.field// 会封装到LayRequest中的params中去
                },
                page:{
                    curr:1//当前页
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        table.render({
            elem:"#roleTable",
            url:"${pageContext.request.contextPath}/log/list",

            defaultToolbar: ['filter', 'print', 'exports'],//右侧工具栏
            cols:[[//定义列信息
                {type:'numbers', fixed: 'left'},
                {field:"id",title:"日志ID",width:100},//一列数据项
                {field:"operation",title:"操作人",width:100},//一列数据项
                {field:"operation_content",title:"操作信息",width:400},
                {field:"operation_Time",title:"操作时间",width:200}
            ]],
            page:true
        })
        layer.msg('Hello World');

        laydate.render({
            elem: '#test1' //指定元素
            ,trigger: 'click'
            ,isInitValue: false
            ,done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); }//得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。

        })

        laydate.render({
            elem: '#test2' //指定元素
                ,trigger: 'click'
                ,isInitValue: false
            ,done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); }//得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。

        })

$("#empty").click(function () {
    // layer.confirm('确定清空么', function(){
    $.ajax({
    url:"${pageContext.request.contextPath}/log/empty",
    type:"post",
    success:function (result) {
        layer.msg("已清空")
        window.location.reload();
    }
    })
// })
})
    });
</script>


</body>
</html>
